<!-- 发展历程,该功能进入的时候需要将所有的地铁路线都清除，离开的时候再添加回来，使用该功能的时候无法使用图层管理控件 -->
<template>
   <SumComp></SumComp>
  <!--几号线 -->
  <div id="subLine-controller">
    <div class="item-wrapper">
      <div
        class="item"
        v-for="item in subLineData"
        @click.stop="handleItemClick(item)"
      >
        <div
          class="box"
          :style="{ borderColor: item.color, backgroundColor: item.color }"
        ></div>
        <span :style="{ color: '#34c5cf' }">{{ item.name.slice(-3) }}</span>
      </div>
    </div>
  </div>
  <!-- 纪念碑 -->
  <div class="active-panel">
    <div class="header" style="margin-top: 10px; ">
      <strong>发展历程</strong>
      <div class="controler"  style="padding: 5px; " >
        <i class="iconfont metro-play" @click="play"></i>
        <i class="iconfont metro-pause" @click="pause"></i>
        <i class="iconfont metro-icon-replay-copy" @click="replay"></i>
      </div>
    </div>
    <div class="content">
      <a-slider
       style="width: 500px; "
        v-if="resPaths.length !== 0"
        v-model:value="currentTime"
        :marks="marks"
        :step="0.5"
        :min="0"
        :max="max"
        :disabled="false"
      >
      </a-slider>
    </div>
    <!-- 内容 -->
    <div class="message" v-if="message.length">
      {{ message }}
    </div>
  </div>
 
</template>

<script setup>
/* 进出时清除所有地铁线路 */
/* 离开时加载所有地铁线路*/
import * as Cesium from 'cesium'
import SumComp from "../components/SumComp.vue";
/* 引入仓库函数 */
import { useLineData } from "../store/index";
const lineDataStore = useLineData();

import { ref, onMounted, onBeforeUnmount,watch } from "vue";
import { line_history } from "../store/staticData";
import {flattenPositions} from "../cesiumTools/core"
import {renderAll,removeByCacheData,flyToDefaultView,removeAll} from "../cesiumTools/course";
const subLineData = ref([]);
const currentTime = ref(0);
const marks = ref({});
const max = ref(100);
const message = ref("");
let viewer;

/* 初始挂载 */
onMounted(() => {
  viewer = lineDataStore.Viewer;
  // console.log(viewer)
  subLineData.value = lineDataStore.allData
  // 将站点站线全部隐藏
  const lineNames = lineDataStore.allData.map((item) => item.name);
  console.log(lineNames)
  lineDataStore.displayLine(lineNames, false);
  // 暂时禁用全局管理，unMount的时候打开
  lineDataStore.disableController(true);
});

/* 在路由跳转之前卸载 */
onBeforeUnmount(() => {
    pause()
    // 清除已经有的数据以及实体
    removeByCacheData(viewer, dataEnts)
    dataEnts = null
    // 全局管理恢复，路线展示恢复
    lineDataStore.disableController(false)
    // 将站点站线全部展示
    const lineNames = lineDataStore.allData.map(item => item.name)
    lineDataStore.displayLine(lineNames, true)
})

/* =====================点击按钮开始运行===================== */
let isAnimate = false
let resPaths = [];
let curPaths = [];

/* 暂停 */
const pause = () => {
  isAnimate = false
};

/* 移除当前实体 */
const removeCurrentEnts = () => {
    // 清除已经有的数据以及实体
    removeByCacheData(viewer, dataEnts)
    dataEnts = {}
}

/* 点击线路函数 */
let dataEnts = {}
const handleItemClick = (item) => {
  // console.log(item)
    const { id, paths } = item;
    const positions = flattenPositions(paths)
    // console.log(positions)
    pause()
    removeCurrentEnts()
    const target = line_history.find((n) => n.id === id);
    if (target) {
        pause()
        currentTime.value = 0;
        // 渲染站点站线,不走内部缓存,要获取返回值，在外部进行管理
        dataEnts = renderAll(viewer, [item],false)
         /* 直接渲染单条线 */
        // dataEnts = renderAll(viewer, [item])
        console.log(dataEnts)
        // viewer.flyTo(dataEnts)
        // 渲染时间slider
        const { history } = target;
        // console.log(history)
        max.value = (history.length - 1) * 10;
        let res = {};
        history.forEach((item, index) => {
            res[index * 10] = {
                style: {
                    color: "#fff",
                    fontSize: 10,
                },
                label: item.timePoint,
                message: item.message,
            };
        });
        console.log(res)
        // 给播放控件赋值，并给路径数据赋值
        marks.value = res;
        console.log(res)
        resPaths = positions;
        curPaths = positions.slice(0, 2);
        // console.log(curPaths)/* 初始位置 */
        // 飞行到默认点
        flyToDefaultView(viewer)
        // 找到路线的实体，并给其坐标重新赋值
        const entity = dataEnts.lineEnts[0]
        // console.log(entity)
        // 给播放控件赋值，并给路径数据赋值
        entity.polyline.positions = new Cesium.CallbackProperty(() => Cesium.Cartesian3.fromDegreesArray(curPaths), false)
        play()
    }
}

const play = () => {
    const animate = () => {
        if (isAnimate) {
            currentTime.value += 0.15;
            const rate = currentTime.value / max.value;
            let index = Math.ceil(rate * resPaths.length);
            // 我们的坐标两个为一组，不为双数的话，就加一
            if (index % 2 !== 0) {
                index = index + 1;
            }
            // 如果是最后一个坐标，就返回
            if (index >= resPaths.length - 1) {
                curPaths = resPaths;
                isAnimate = false
                return;
            }
            curPaths = resPaths.slice(0, index);
            requestAnimationFrame(animate)
        }
    }
    isAnimate = true
    animate()
}


const replay = () => {
    pause();
    currentTime.value = 0;
    curPaths = resPaths.slice(0, 2);
    play();
}

watch(currentTime, (val) => {
    let targetIndex = null;
    const markKeys = Object.keys(marks.value).map((n) => Number(n));
    const markValues = Object.values(marks.value);
    markKeys.forEach((m, index) => {
        // 判断val是否在值区间
        if (index > 0 && val <= m && val > markKeys[index - 1]) {
            targetIndex = index;
        }

        if (val <= m && index === 0) {
            targetIndex = index;
        }
    });
    if (targetIndex) {
        const result = markValues[targetIndex];
        message.value = result.message;
    } else {
        message.value = "";
    }
});

</script>

<style scoped>
#subLine-controller {
  position: absolute;
  bottom: 90px;
  left: 32%;
  transform: translateX(-50%);
  width: 9vw;
  height: 12vw;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #664a16;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.box {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  user-select: all;
  cursor: pointer;
}

.item {
  width: 3.385vw;
  height: 1.8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.156vw;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #885f12;
  color: #fff;
  font-size: 0.8vw;
  pointer-events: all;
  cursor: pointer;
}

.item:hover {
  border: 1px solid #d8961a;
}

.item > span {
  line-height: 0.469vw;
}

.item > input {
  outline: none;
  border: none;
  transition: all 0.3s ease;
}

.item-wrapper {
  display: flex;
  justify-content: space-between;
  align-content: space-around;
  flex-wrap: wrap;
  flex: 1;
}

.active-panel {
  width: 580px;
  height: 170px;
  border: 1px solid #ab7818;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 37%;
  bottom: 90px;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.active-panel > .header {
  height: 1.563vw;
  padding: 0.208vw;

  margin-bottom: -0.521vw;
  font-family: "等线Bold";
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.active-panel > .header > strong {
  background: rgb(255, 255, 255);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 9%,
    rgba(211, 156, 50, 1) 57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.controler {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.controler > i {
  cursor: pointer;
  pointer-events: all;
  font-size: 20px;
}

.controler > i:hover {
  background: rgb(255, 255, 255);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 9%,
    rgba(211, 156, 50, 1) 57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.active-panel > .header > strong {
  font-weight: normal;
  margin-right: 0.521vw;
}

.active-panel > .header > span {
  font-size: 0.625vw;
}

.content {
  flex: 1;
  padding: 0 30px;
  margin-top: 30px;
}

.message {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  /* background-color: rgba(0, 0, 0, 0.3); */
  color: #fff;
  text-align: center;
}
</style>
